<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('pageTranslation.crushStockOut')" @clickRight="clickRight" scanType="0"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="page-auto">
				<!-- 调拨单信息 -->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{$t('materials.invoiceInformation')}}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{$t('smashRemoval.letterOfAdvice')}}：</text>{{data.enterDetails.dnCode}}
					</view>
                    <view class="custom-card-itemOne">
						<view class="card-item-50" style="width: 100%;">
							<text class="item-info-title">{{$t('translationImage.documentationDate')}}：</text>{{data.enterDetails.establishTime}}
						</view>
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{$t('distributedEnter.compiler')}}：</text>{{data.enterDetails.createUserName }}
					</view>
					<view class="custom-card-itemOne">
						<view class="card-item-50">
							<text class="item-info-title">{{$t('smashRemoval.deliveredTotal')}}：</text>{{data.enterDetails.baseQty}}
						</view>
						<view class="card-item-50">
							<text class="item-info-title">{{$t('smashRemoval.quantityNotDelivered')}}：</text>{{(Number(data.enterDetails.baseQty) - Number(data.enterDetails.sumScan)).toFixed(4) ||0}}
						</view>
					</view>
                    <view class="custom-card-itemOne">
						<view class="card-item-50">
							<text class="item-info-title">{{$t('smashRemoval.quantityDelivered')}}：</text>{{data.enterDetails.sumScan}}
						</view>
						<view class="card-item-50">
							<text class="item-info-title">{{$t('smashRemoval.inputTotal')}}：</text>{{data.barcodeNumber || 0}}
						</view>
					</view>
				</view>
				<!-- card信息 -->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{$t('translationImage.materialsInformation')}}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{$t('distributedEnter.materialCoded')}}：</text>{{data.barcodeList.barcode}}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{$t('distributedEnter.materialCode')}}：</text>{{data.barcodeList.materialCode}}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{$t('distributedEnter.materialName')}}：</text>{{data.barcodeList.materialName}}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{$t('distributedEnter.materialSpec')}}：</text>{{data.barcodeList.materialSpec}}
					</view>
					<view class="custom-card-itemOne">
						<view class="card-item-50">
							<text class="item-info-title">{{$t('distributedEnter.uom')}}：</text>{{data.barcodeList.unit}}
						</view>
						<view class="card-item-50">
							<text class="item-info-title">{{$t('distributedEnter.qty')}}：</text>{{data.barcodeList.currentQty}}
						</view>
					</view>
				</view>
				<!-- 输入数量模块 -->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{$t('smashRemoval.currentInputQuantity')}}
					</view>
					<!-- <view class="gui-form-item" >
						<text class="item-info-title">barCode：</text>{{data.FSBarcode}}
					</view> -->
					<view class="custom-card-scan" style="margin-top:20rpx;">
						<text class="item-info-title"><text class="required-color">*</text>{{$t('slottedAsh.qtyShipped')}}：</text>
						<uni-easyinput class="uni-mt-5"  v-model="data.barcodeNumber" :placeholder="$t('smashRemoval.pleaseInputQty')" type="number"   @focus="popupClick">
						</uni-easyinput>
					</view>
				</view>
				
				<view style="height: 150rpx;"></view>
				<!-- 底部操作栏 -->
				<view class="page-bottom">
					<view class="page-bottomBtn bottomBtn-bgcolor-green" @click="submit">
						{{$t('calendar.submit')}}
					</view>
				</view>
			</view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" type="center">
				<view class="input-dialog-box" style="padding: 40rpx 20rpx 20rpx 20rpx;border-radius: 22rpx;width: 600rpx;">
					<uni-icons class="popup-close-icons" type="closeempty" color="#9C9C9C" size="26" @click="closePopup"></uni-icons>
					<view class="input-dialog-content">
						<view class="gui-form-item" id="barcodeNumber">
							<text style="width: 200rpx;">{{$t('distributedEnter.qty')}}：</text>
							<view>
								<input type="number"  class="gui-form-input" v-model="data.barcodeNumber" :placeholder="$t('smashRemoval.pleaseInputQty')" focus="true" style="margin: 8rpx 0; font-size: 36rpx;"/>
							</view>
						</view>
					</view>
					<view class="input-dialog-footer">
						<view class="input-dialog-button" @click="cancelFn">{{$t('calendar.cancel')}}</view>
						<view class="input-dialog-button dialog-button-left" @click="confirmFn">{{$t('calendar.confirm')}}</view>
					</view>
				</view>
			</uni-popup>
			<!-- 提交二次普通弹窗确认 -->
			<uni-popup ref="submitPopup" type="center">
				<view class="input-dialog-box" style="border-radius: 22rpx;width: 600rpx;">
					<view class="input-dialog-content">
						<view class="custom-card-title">
							<text class="title-line"></text>
							{{$t('materials.pleaseConfirmThe')}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{$t('materials.totalNumberOf')}}：</text>{{data.enterDetails.baseQty}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{$t('materials.numberOfMaterialBarcodes')}}：</text>{{data.barcodeList.currentQty}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{$t('materials.theNumberOfInputs')}}：</text>{{data.barcodeNumber}}
						</view>
					</view>
					<view class="input-dialog-footer">
						<view class="input-dialog-button dialog-button-left" @click="confirmSubmit">{{$t('calendar.confirm')}}</view>
					</view>
				</view>
			</uni-popup>
		</template>
	</gui-page>
</template>

<script setup>
	import {navigate} from '@/utils/routerSkip.js';
	import {reactive,ref,onMounted} from 'vue';
	import {findWmsDnHById,selectWmsBarcodeInfoWms,sdistributedCallOut,slottedAshOutstock} from '@/api/api.js'
	import storageBin from '@/components/storageBin.vue'
	import {useStore} from "vuex";
	import pdaScan from '@/hooks/pdaScan.js'
	import { basPdaOperationLogFn } from '@/utils/index.js';
	import { OPERATION_COMMIT, OPERATION_LOOK, OPERATION_SCAN } from '@/constant/index.js'
	//JS国际化引入
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();

	let store = useStore()
	const { scan } = pdaScan()

	components: {storageBin}

	const props = defineProps({
		id:String,
		salesOrders:String,
	})

	//弹框的定义
	let popup = ref(null)
	let submitPopup=ref(null)

	let data = reactive({
		id: props.id,// 上级界面传过来的id
		salesOrders:props.salesOrders, // 销售订单号
		barcodeNumber:null,
		value: ['0'],
		enterDetails:{},
		FSBarcode:'',
		barcodeList:{}
	})

	onMounted(()=>{
		findStepoutHByIdFn()
		// 查询条码信息
		selectBarcodeList()
	})
	
	const selectBarcodeList=()=>{
		//调用接口，查询条码信息
		let parmes = {
			receiptId:data.id,
			asnHId:data.id,
			barcode: "FSCARD",
			selectType: 'salesOut',
			isFs:1,
		}
		selectWmsBarcodeInfoWms(parmes).then(res=>{
			try {
				let inputParameter = JSON.stringify(parmes)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '开槽灰出库'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode:res.status,//返回状态
					errorMessage:res.message,//错误信息
					isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
					operationType:OPERATION_LOOK
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {
			}
			console.log(res)
			if (res.status == 200) {
				data.barcodeList=res.data; //存储获取的物料信息
			} else {
				uni.showToast({
					title:res.message,
					icon: 'none'
				})
			}
		})
	}

	// 根据id查询调出单详情，第一个card页面的内容
	const findStepoutHByIdFn = () => {
		let parmes = {
			id: props.id
		}
		findWmsDnHById(parmes).then(res=>{
			try {
				let inputParameter = JSON.stringify(parmes)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '开槽灰出库'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode:res.status,//返回状态
					errorMessage:res.message,//错误信息
					isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
					operationType:OPERATION_LOOK
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {
			}
			if (res.status == 200) {
				data.enterDetails = res.data;
				data.enterDetails.currentScanNum = res.data.sumScan;
				data.barcodeNumber=(Number(data.enterDetails.baseQty) - Number(data.enterDetails.sumScan)).toFixed(4)
			}else{
				uni.showToast({title: res.message,icon: 'none'})
			}
		})
	}

	//点击输入数量框打开弹框
	const popupClick=()=>{
		popup.value.open()
	}
	//图标关闭数量填写打开的弹框
	const closePopup= () => {
		popup.value.close();
	}

	// 弹框的取消按钮，填写数量打开的弹框
	const cancelFn = () => {
		data.barcodeNumber=null;
		popup.value.close();
	}

	//弹框的确定按钮
	const confirmFn = () => {
		if(Number(data.barcodeNumber)<=0){
			uni.showToast({
				title: t('smashRemoval.pleaseEnterQty'),
				icon: 'none'
			})
			return
		}
		if(Number(data.barcodeNumber)>data.enterDetails.baseQty){
			uni.showToast({
				title: t('pageTranslation.inputQtyCant'),
				icon: 'none'
			})
			return
		}
		popup.value.close();
	}

	//提交
	const submit = () => {
		// 更改发货数量  Number(data.enterDetails.sumScan)+Number(data.barcodeNumber)
		// 判断输入的数量是否大于0
		data.enterDetails.sumScan=Number(data.barcodeNumber)
		// 判断输入的数量是否大于0
		if(Number(data.barcodeNumber)<=0){
			uni.showToast({
				title: t('smashRemoval.pleaseEnterQty'),
				icon: 'none'
			})
			return
		};
		if(Number(data.barcodeNumber)>Number(data.barcodeList.currentQty)){
			uni.showToast({
				title: t('pageTranslation.submittedQty'),
				icon: 'none'
			})
			return
		};
		// 二次打开弹框确认
		submitPopup.value.open()
	}

	// 提交二次弹框的确认
	const confirmSubmit=()=>{
		// 关闭弹框
		submitPopup.value.close()
		// 启用调用接口，数据提交给后端
		let barcodes = [];
		//转换接口需要数据的格式
		barcodes.push({
			barcode:data.barcodeList.barcode,
			id:data.barcodeList.id,
			materialCode:data.barcodeList.materialCode,
			currentQty:Number(data.barcodeNumber)
		})
		// 调用接口
		let parmes = {  //复用的上基材调出的接口
			dnHId:props.id,
			// dnTypeCode:'xs',
			barcodes:barcodes,
			soCode:data.salesOrders,
			isFs:1,
			fsQty:Number(data.barcodeNumber),
			changeQty:Number(data.barcodeNumber)
			
		}
		// 添加加载框
		uni.showLoading({
			title: 'loading',
			mask: true
		});
		slottedAshOutstock(parmes).then(res=>{
			try {
				let inputParameter = JSON.stringify(parmes)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '开槽灰出库'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode:res.status,//返回状态
					errorMessage:res.message,//错误信息
					isPass:res.status == 200 ? 'Y' : 'N',//是否成功 Y N
					operationType:OPERATION_COMMIT
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {
			}
			if (res.status == 200) {
				//隐藏加载框
				uni.hideLoading();
				uni.showToast({
					title: t('smashRemoval.submitSuccessfully'),
					icon: 'none',
					complete: () => {
						data.barcodeNumber=null;
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			} else {
				// data.enterDetails.sumScan=Number(data.enterDetails.sumScan)-Number(data.barcodeNumber)
				uni.showToast({
					title: res.message,
					icon: "none"
				});
			}
		})
	}

</script>

<style scoped lang="scss">
#barcodeNumber {
	color: #dd524d;
	font-size: 36rpx;
}

</style>
